<template>
  <div class="wraper clearBoth">
      <p class="prompt">
        {{$t('channelsettings.schedule7')}}
        {{$t('configLazyLoad.remoteControl.tips2', {number1: maxCount, number2: this.agentChecked.length, number3: maxCount - this.agentChecked.length})}}
				<template v-if="deleteAgents.length">
					<br>
         {{$t('configLazyLoad.remoteControl.tips1', {name: deleteAgents.join(', ')})}}
				</template>
			</p>
      <span class="label">{{$t('public.pickAgent')}}</span>
      <agent-tree-select
				style="width: 290px"
				ref="agentTree"
				class="agent-tree"
				:forChannelConfig="true"
				:disabled="disabled"
				:agentCheckedIds="agentCheckedIds"
				@agent-change="handleAgentChange">
      </agent-tree-select>
			<div class="agent-list">
				<div>
					<span>{{$t('configLazyLoad.remoteControl.tips3', {number: this.agentChecked.length})}}</span> <el-button type="text" @click="clear" size="mini" class="clear">{{$t('public.clear')}}</el-button>
				</div>
				<el-tag v-for="(item, index) in agentChecked"
					closable
					effect="plain"
					class="no-border"
					@close="close(index)"
					type="info">
					{{item.displayName}}[{{item.exten}}]
				</el-tag>
			</div>
			<el-button type="primary" @click="save" class="primary_btn fr">{{$t('public.save')}}</el-button>
  </div>
</template>
<script>
  import AgentTreeSelect from '@/components/public-modules/agent-tree/AgentTreeSelect'
  export default {
    name: 'remoteControlAgents',
    data () {
      return {
        agentChecked: [],
        maxCount: 0,
        deleteAgents: []
      }
    },
    computed: {
      agentCheckedIds () {
        return this.agentChecked.map((item) => {
          return item._id
        })
      },
      disabled () {
        return this.agentChecked.length >= this.maxCount
      }
    },
    components: {
      AgentTreeSelect
    },
    methods: {
      handleAgentChange (checkedAgents) {
        this.agentChecked = checkedAgents.slice(0, this.maxCount)
      },
      close (index) {
        this.agentChecked.splice(index, 1)
      },
      clear () {
        this.agentChecked = []
      },
      save () {
        this.$store.dispatch('saveExtenAssignRecord', {account: this.$store.state.session.account.account, extenAssign: this.agentCheckedIds}).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('config.channel.saveSuccess'))
            this.deleteAgents = []
          }
        })
      },
      getConfig () {
        this.$store.dispatch('getExtenAssignRecord', {account: this.$store.state.session.account.account}).then((res) => {
          if (res.success) {
            let agents = this.$agentsMap()
            this.deleteAgents = (res.delExtenAssign || []).map((item) => {
              let agent = agents[item] || {}
              return `${agent.displayName}[${agent.exten}]`
            })
            this.agentChecked = (res.extenAssign || []).map((item) => {
              let {_id, displayName, exten} = agents[item] || {}
              return {_id, displayName, exten}
            })
            this.maxCount = res.count || 0
          }
        })
      }
    },
    beforeMount () {
      this.getConfig()
    }
  }
</script>
<style lang="stylus" scoped>
	@import "../../../../../assets/common.styl"
	.wraper
		padding 0 20px 20px
		.prompt
			color $c-prompt
			padding 12px 0 20px
		.label
			display block
			padding-bottom 6px
		.agent-list
			padding-top 20px
			padding-bottom 20px
			margin-top 20px
			border-top 1px solid $c-border1
		.clear
			margin-left 20px
		.no-border
			margin-right 40px
			border none
			padding 0
			color $cf-gray0
</style>
